function EditOrderTaskGui(prefix, container, item, options) {
  this._prefix = prefix;
  this._container = container;
  this._item = item;
  
  this._createElements();
};

EditOrderTaskGui.prototype._createElements = function() {
  var table, tr, td, input, select, option;
  
  var topTable = document.createElement('table');
  topTable.style.backgroundImage = 'url(images/pageasst/pagecustomer/tasktop.png)';
  topTable.style.backgroundRepeat = 'no-repeat';
  topTable.style.width = '838px';
  topTable.style.height = '15px';
  topTable.cellPadding = 0;
  topTable.cellSpacing = 0;
  this._container.appendChild(topTable);
  
  table = document.createElement('table');
  table.style.backgroundImage = 'url(images/pageasst/pagecustomer/taskmiddle.png)';
  table.style.backgroundRepeat = 'repeat-y';
  table.style.width = '838px';
  table.style.height = '100px';
  table.cellPadding = 0;
  table.cellSpacing = 0;
  this._container.appendChild(table);
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.colSpan = 10;
  var day = document.createElement('img');
  day.src = 'images/pageasst/pagecustomer/day.png';
  day.style.margin = '10px 0 0 30px';
  td.appendChild(day);
  td = tr.insertCell(-1);
  td.style.width = '145px';
  td.style.textAlign = 'left';
  input = document.createElement('img');
  input.src = 'images/pageasst/pagecustomer/del.png';
  input.style.cursor = 'pointer';
  input.style.margin = '0 0 0 10px';
  input.id = this._prefix + '_remove';
  td.appendChild(input);
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.style.height = '25px';
  td.style.verticalAlign = 'top';
  td.colSpan = 11;
  td.id = this._prefix + '_date';
  input = DOMUtils.createInput(null, null, 'text', SimpleDate.format(this._item.date), null);
  input.style.width = '200px';
  input.style.height = '21px';
  input.style.margin = '0px 0 0 30px';
  td.appendChild(input);
  
  if (this._item.photographers.length != 0 || this._item.videographers.length != 0) {
    tr = table.insertRow(-1);
    td = tr.insertCell(-1);
    td.colSpan = 11;
    td.style.height = '50px';
    td.style.textAlign = 'center';
    var title = document.createElement('img');
    title.src = 'images/pageasst/pagecustomer/tasktitle.png';
    td.appendChild(title);
    
    tr = table.insertRow(-1);
    td = tr.insertCell(-1);
    td.style.width = '145px';
    td.style.height = '25px';
    td.appendChild(document.createTextNode(''));
    td = tr.insertCell(-1);
    td.style.width = '20px';
    td = tr.insertCell(-1);
    td.style.width = '160px';
    td.style.textAlign = 'center';
    var hours = document.createElement('img');
    hours.src = 'images/pageasst/pagecustomer/hours.png';
    td.appendChild(hours);
    td = tr.insertCell(-1);
    td.style.width = '20px';
    td = tr.insertCell(-1);
    td.style.width = '20px';
    td = tr.insertCell(-1);
    td.style.width = '145px';
    td.style.textAlign = 'center';
    var ehours = document.createElement('img');
    ehours.src = 'images/pageasst/pagecustomer/extrahours.png';
    td.appendChild(ehours);
    td = tr.insertCell(-1);
    td.style.width = '20px';
    td = tr.insertCell(-1);
    td.style.width = '20px';
    td = tr.insertCell(-1);
    td.style.width = '145px';
    td.style.textAlign = 'center';
    var fee = document.createElement('img');
    fee.src = 'images/pageasst/pagecustomer/travellingfee.png';
    td.appendChild(fee);
    td = tr.insertCell(-1);
    td.style.width = '20px';
    td = tr.insertCell(-1);
    
    for (var i = 0, il = this._item.photographers.length; i < il; i++) {
      var photographer = this._item.photographers[i];
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.height = '35px';
      td.style.textAlign = 'center';
      var photo = document.createElement('img');
      photo.src = 'images/pageasst/pagecustomer/photographer.png';
      td.appendChild(photo);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/leftbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'photo' + this._prefix + '_' + i + '1';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      input = DOMUtils.createInput(null, null, 'text', photographer.estimates, null);
      input.id = this._prefix + '_' + i + '_photographer_hours';
      input.style.width = '145px';
      input.style.height = '21px';
      input.disabled = true;
      input.style.color = '#000';
      input.style.textAlign = 'center';
      input.style.backgroundColor = '#fff';
      input.style.border = 'solid 1px #ccc';
      td.appendChild(input);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/rightbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'photo' + this._prefix + '_' + i + '2';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/leftbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'photo' + this._prefix + '_' + i + '3';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      input = DOMUtils.createInput(null, null, 'text', photographer.extras, null);
      input.id = this._prefix + '_' + i + '_photographer_extraHours';
      input.style.width = '145px';
      input.style.height = '21px';
      input.disabled = true;
      input.style.color = '#000';
      input.style.textAlign = 'center';
      input.style.backgroundColor = '#fff';
      input.style.border = 'solid 1px #ccc';
      td.appendChild(input);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/rightbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'photo' + this._prefix + '_' + i + '4';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/leftbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'photo' + this._prefix + '_' + i + '5';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      input = DOMUtils.createInput(null, null, 'text', photographer.travel, null);
      input.id = this._prefix + '_' + i + '_photographer_travel';
      input.style.width = '145px';
      input.style.height = '21px';
      input.disabled = true;
      input.style.color = '#000';
      input.style.textAlign = 'center';
      input.style.backgroundColor = '#fff';
      input.style.border = 'solid 1px #ccc';
      td.appendChild(input);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/rightbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'photo' + this._prefix + '_' + i + '6';
      td.appendChild(img);
      
      td = tr.insertCell(-1);
      input = document.createElement('img');
      input.src = 'images/pageasst/pagecustomer/delete.png';
      input.style.cursor = 'pointer';
      input.style.margin = '0 0 0 20px';
      input.id = this._prefix + '_' + i + '_photographer_remove';
      td.appendChild(input);
    }
    
    for (var j = 0, jl = this._item.videographers.length; j < jl; j++) {
      var videographer = this._item.videographers[j];
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      var video = document.createElement('img');
      video.src = 'images/pageasst/pagecustomer/videographer.png';
      td.appendChild(video);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/leftbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'video' + this._prefix + '_' + j + '1';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      input = DOMUtils.createInput(null, null, 'text', videographer.estimates, null);
      input.id = this._prefix + '_' + j + '_videographer_hours';
      input.style.width = '145px';
      input.style.height = '21px';
      input.disabled = true;
      input.style.color = '#000';
      input.style.textAlign = 'center';
      input.style.backgroundColor = '#fff';
      input.style.border = 'solid 1px #ccc';
      td.appendChild(input);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/rightbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'video' + this._prefix + '_' + j + '2';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/leftbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'video' + this._prefix + '_' + j + '3';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      input = DOMUtils.createInput(null, null, 'text', videographer.extras, null);
      input.id = this._prefix + '_' + j + '_videographer_extraHours';
      input.style.width = '145px';
      input.style.height = '21px';
      input.disabled = true;
      input.style.color = '#000';
      input.style.textAlign = 'center';
      input.style.backgroundColor = '#fff';
      input.style.border = 'solid 1px #ccc';
      td.appendChild(input);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/rightbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'video' + this._prefix + '_' + j + '4';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/leftbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'video' + this._prefix + '_' + j + '5';
      td.appendChild(img);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      input = DOMUtils.createInput(null, null, 'text', videographer.travel, null);
      input.id = this._prefix + '_' + j + '_videographer_travel';
      input.style.width = '145px';
      input.style.height = '21px';
      input.disabled = true;
      input.style.color = '#000';
      input.style.textAlign = 'center';
      input.style.backgroundColor = '#fff';
      input.style.border = 'solid 1px #ccc';
      td.appendChild(input);
      td = tr.insertCell(-1);
      td.style.width = '20px';
      td.style.textAlign = 'center';
      td.style.verticalAlign = 'middle';
      var img = document.createElement('img');
      img.src = 'images/pageasst/pagecustomer/rightbtn.png';
      img.style.cursor = 'pointer';
      img.id = 'video' + this._prefix + '_' + j + '6';
      td.appendChild(img);
      td = tr.insertCell(-1);
      input = document.createElement('img');
      input.src = 'images/pageasst/pagecustomer/delete.png';
      input.style.cursor = 'pointer';
      input.style.margin = '0 0 0 20px';
      input.id = this._prefix + '_' + j + '_videographer_remove';
      td.appendChild(input);
    }
  }
  
  if (this._item.makeups.length > 0) {
    tr = table.insertRow(-1);
    td = tr.insertCell(-1);
    td.colSpan = 11;
    td.style.height = '50px';
    td.style.textAlign = 'center';
    var title = document.createElement('img');
    title.src = 'images/pageasst/pagecustomer/makeuptitle.png';
    td.appendChild(title);
  
    tr = table.insertRow(-1);
    td = tr.insertCell(-1);
    td.colSpan = 11;
    td.style.height = '10px';
    td.style.textAlign = 'center';
    var type = document.createElement('img');
    type.src = 'images/pageasst/pagecustomer/makeuptype.png';
    td.appendChild(type);
    td = tr.insertCell(-1);
    
    for (var i = 0, il = this._item.makeups.length; i < il; i++) {
      var makeup = this._item.makeups[i];
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.colSpan = 5;
      td.style.textAlign = 'right';
      var makeup = document.createElement('img');
      makeup.src = 'images/pageasst/pagecustomer/makeup.png';
      td.appendChild(makeup);
      td = tr.insertCell(-1);
      td.style.textAlign = 'center';
      var select = document.createElement('select');
      select.style.width = '145px';
      select.style.height = '25px';
      select.id = this._prefix + '_' + i + '_makeup_sample_select';
      td.appendChild(select);
      for (var j = 0, jl = MakeupType.array().length; j < jl; j++) {
        var type = MakeupType.array()[j];
        var option = new Option(type);
        option.id = this._prefix + '_' + i + '_' + j + '_makeup_sample_option';
        select.options[select.options.length] = option;
        if (type == makeup.type) {
          select.selectedIndex = j;
        }
      }
      td = tr.insertCell(-1);
      input = document.createElement('img');
      input.src = 'images/pageasst/pagecustomer/delete.png';
      input.style.cursor = 'pointer';
      input.id = this._prefix + '_' + i + '_makeup_remove';
      input.style.margin = '0 0 0 15px';
      td.appendChild(input);
    }
  }
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.colSpan = 11;
  td.style.height = '50px';
  td.style.verticalAlign = 'bottom';
  input = document.createElement('img');
  input.src = 'images/pageasst/pagecustomer/padd.png';
  input.style.cursor = 'pointer';
  input.style.margin = '0 10px 0 30px';
  input.id = this._prefix + '_add_photographer';
  td.appendChild(input);
  input = document.createElement('img');
  input.src = 'images/pageasst/pagecustomer/vadd.png';
  input.style.cursor = 'pointer';
  input.style.margin = '0 10px 0 0px';
  input.id = this._prefix + '_add_videographer';
  td.appendChild(input);
  input = document.createElement('img');
  input.src = 'images/pageasst/pagecustomer/madd.png';
  input.style.cursor = 'pointer';
  input.style.margin = '0 10px 0 0px';
  input.id = this._prefix + '_add_makeup';
  td.appendChild(input);
  
  var bottomTable = document.createElement('table');
  bottomTable.style.backgroundImage = 'url(images/pageasst/pagecustomer/taskbottom.png)';
  bottomTable.style.backgroundRepeat = 'no-repeat';
  bottomTable.style.width = '838px';
  bottomTable.style.height = '15px';
  bottomTable.cellPadding = 0;
  bottomTable.cellSpacing = 0;
  this._container.appendChild(bottomTable);
};